<template>
  <div class="dialog">
    <el-dialog title="投塘详情" :visible.sync="showDialog" width="80%" top="0" :close-on-click-modal="false" @close="cancel">
      <el-row :gutter="15">
        <el-table ref="rightTableData" :data="rightTableData" highlight-current-row border stripe>
          <el-table-column type="index" label="序号" width="50" />
          <el-table-column label="关联采购订单" prop="inputNum" />
          <el-table-column label="关联批次" prop="mnecode" />
          <el-table-column label="批次编码" prop="productionBatchCode" />
          <el-table-column label="品种名称" prop="fishVarietyName" />
          <el-table-column label="投入规格" prop="specificationId" align="center" min-width="120">
            <template slot-scope="scope">
              <el-select filterable clearable :disabled="closePondFlag" @change="handlerChange(scope.$index)" v-model="scope.row.specificationId" >
                <el-option v-for="item of specificationList" :key="item.specificationId" :label="item.specificationName"
                  :value="item.specificationId" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="投入数量" prop="inputNum">
            <template slot-scope="scope">
              <el-input :disabled="closePondFlag" v-model="scope.row.inputNum" @change="handlerChange(scope.$index)" />
            </template>
          </el-table-column>
          <el-table-column label="投入重量" prop="inputWeight">
            <template slot-scope="scope">
              <el-input :disabled="closePondFlag" v-model="scope.row.inputWeight" @change="handlerChange(scope.$index)" />
            </template>
          </el-table-column>
          <el-table-column label="鱼塘面积" prop="pondArea" />
          <el-table-column label="投塘人" prop="staffName" />
          <el-table-column label="投塘日期" prop="inputDate" />
          <el-table-column label="操作" min-width="120" v-if="!closePondFlag">
            <template slot-scope="scope">
              <el-button type="text" style="color: red; text-decoration: underline" size="small" @click.native.prevent="
                editRow([scope.row], false, scope.$index)
              ">提交修改</el-button>
              <el-button type="text" style="color: red; text-decoration: underline" size="small"
                @click.native.prevent="deleteRow(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
          <template slot="empty">
            <div style="color: #000">暂无数据</div>
          </template>
        </el-table>
        <Pagination :page-size="5" :current-page="currentPage" :total-size="totalSize"
          @changeCurrentPage="changeCurrentPage" />
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button class="cancelbtn" @click="cancel()">取 消</el-button>
        <el-button type="primary" class="savebtn" @click="saveData()">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import InputPondApi from "@/api/inputPond";
import InputPondDetailApi from "@/api/inputPond/input-pond-detail";
import SpecificationApi from "@/api/basic-info-manage/specification";
import Pagination from "@/components/Pagination";
import { mapGetters } from "vuex";
import { mymixin } from "@/utils/mixin";
export default {
  name: "",
  components: { Pagination },
  mixins: [mymixin],
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    completeInfoObject: {
      type: [Object],
      default: () => {
        return {};
      },
    },
  },
  data () {
    return {
      rightTableData: [],
      specificationList: [],
      currentBatchId: 1,
      showDialog: this.show,
      addIndex: [],
      isEdit: true,
      closePondFlag:false
    };
  },
  computed: {
    ...mapGetters({
      judgePermission: "permission/judgePermission",
    }),
  },
  watch: {
    show (v) {
      this.showDialog = v;
      this.closePondFlag = this.completeInfoObject.closePondFlag
    },
    completeInfoObject (v) {
      this.queryInputPondDetail(v);
      this.querySpecification(v);
    },
  },
  created () { },
  mounted () { },
  methods: {
    saveData () {
      let rowList = [];
      this.addIndex.forEach((index) => {
        rowList.push(this.rightTableData[index]);
      });
      this.editRow(rowList, true);
    },
    handlerChange (index) {
      let flag = this.addIndex.some((val) => {
        return val == index;
      });
      !flag ? this.addIndex.push(index) : "";
      console.log(this.addIndex);
    },
    queryPageList () {
      this.queryInputPondDetail(this.completeInfoObject);
    },
    queryInputPondDetail (v) {
      let params = {
        page: this.currentPage,
        size: 5,
        sortStr: "inputDate",
        order: "desc",
        entity: {
          productionBatchId: v.productionBatchId,
        },
      };
      InputPondApi.queryPageByCondition(params).then((res) => {
        if (res.success) {
          this.totalSize = res.data.totalElements;
          this.rightTableData = res.data.content;
        }
      });
    },
    // 查询品种的规格
    querySpecification (v) {
      let params = {
        page: this.currentPage,
        size: this.pageSize,
        entity: {
          fishVarietyId: v.varietyId,
        },
      };
      SpecificationApi.queryPageByCondition(params).then((res) => {
        if (res.success) {
          this.specificationList = res.data.content;
        }
      });
    },
    // 修改数据
    editRow (rowList, showDialog, index) {
      this.isEdit = true
      rowList.forEach(row => {
        if (Number(row.inputWeight) <= 0 || Number(row.inputNum) <= 0) {
          this.isEdit = false
        }
      })
      if (!this.isEdit) {
        this.$message.error('投入数量和投入重量参数不可小于0')
        return
      }
      if (rowList && rowList.length) {
        let queryList = [];
        rowList.forEach((row) => {
          queryList.push(
            InputPondDetailApi.edit({
              inputPondDetailId: row.inputPondDetailId,
              specificationId: row.specificationId,
              inputNum: row.inputNum,
              inputWeight: row.inputWeight,
            })
          );
        });
        Promise.all(queryList)
          .then((res) => {
            console.log(res);
            this.$message.success("修改成功！");
            if (showDialog) {
              this.addIndex = [];
              this.cancel();
            } else {
              this.addIndex = this.addIndex.filter(function (val) {
                return val !== index;
              });
            }
          })
          .catch((error) => {
            this.$message.error(error.message);
          });
      } else {
        this.cancel();
      }
    },
    // 删除一行数据
    deleteRow (index, rows) {
      console.log(index, rows);
      this.$confirm("此操作将永久删除该项, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let params = {
            id: rows.inputPondDetailId,
          };
          InputPondDetailApi.delById(params).then((res) => {
            if (res.success === true) {
              this.$message.success("删除成功！");
              this.rightTableData.splice(index, 1);
            } else {
              this.$message.error(res.message);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    changeCurrentPage (currentPage) {
      this.currentPage = currentPage;
      this.queryPageList();
    },
    close () {
      this.$emit("closeDialog");
    },
    cancel () {
      this.$emit("cancelDialog");
    },
  },
};
</script>

<style lang="scss" scoped>
.pagination {
  position: absolute;
  right: 0px;
  bottom: -40px;
}

.el-table {
  position: relative;
}

::v-deep .el-dialog__body {
  padding: 30px 20px 50px 20px;
}
</style>
